<template>
	<view>
		<view class="data-box">
			<view class="item-box" style="margin-bottom: 50rpx;">
				<view>
					{{$t('index.bot')}}
					<text>{{Number(bot.robotNum)}}</text>
				</view>
				<view>
					{{$t('index.dayProfit')}}(XTTA)
					<text>{{Number(bot.dayProfit).toFixed(4)}}</text>
				</view>
			</view>
			<view class="item-box">
				<view>
					{{$t('index.sumProfit')}}(XTTA)
					<text>{{Number(bot.sumProfit).toFixed(4)}}</text>
				</view>
				<view>
					{{$t('my.totalOutPut')}}(XTTA)
					<text>{{Number(bot.totalOutPut).toFixed(4)}}</text>
				</view>
				<!-- <view class="btn-box">
					{{$t('robot.income')}}
				</view> -->
			</view>
		</view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :use-page-scroll="true">
			<view class="item" v-for="item in dataList">
				<view class="title-box">
					<view>
						<image src="../../static/img/bot/us.png" style="width: 70rpx; height: 40rpx;margin-right: 6rpx;"></image>
						{{item.stakingCurrencyCode}}/{{item.stakingTwoCurrencyCode}}
					</view>
					<view class="btn-box">
						{{$t('index.dayProfit')}}<text>{{item.dayProfit}}</text>
					</view>
				</view>
				<view class="info-box">
					<view class="need-pay">
						<view class="label-box">{{$t('index.dayProfit')}}</view>
						<view class="number-box">
							<view>{{item.dayProfit}} {{item.outPutCurrencyCode}}</view>
						</view>
					</view>
					<view class="need-pay" style="margin-top: 20rpx;">
						<view class="label-box">{{$t('index.sumProfit')}}</view>
						<view>
							<view>{{item.sumProfit}} {{item.outPutCurrencyCode}}</view>
						</view>
					</view>
					<view class="need-pay" style="margin-top: 20rpx;">
						<view class="label-box">{{$t('trade.buy') + $t('my.time')}}</view>
						<view>
							<view>{{timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
						</view>
					</view>
					<view class="need-pay" style="margin-top: 20rpx;">
						<view class="label-box">{{$t('my.triple')}}</view>
						<view>
							<view>{{item.outAmount}}</view>
						</view>
					</view>
					<view class="need-pay" style="margin-top: 20rpx;">
						<view class="label-box">{{$t('robot.num')}}</view>
						<view>
							<view>{{item.num}}</view>
						</view>
					</view>
					<view class="need-pay" style="margin-top: 20rpx;">
						<view class="label-box">{{$t('my.dayTotalOutOut')}}</view>
						<view>
							<view>{{item.dayTotalOutOut}}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		

		<view class="bottom-box"></view>

	</view>
</template>

<script setup>
	import { timeFormat } from '@/uni_modules/uview-plus';
	import tabbarVue from '@/components/tabbar/index.vue'
	import { ref,watch } from 'vue';
	import { queryRobotFlow} from '@/common/api/common.js'
	const paging = ref(null)
	const dataList = ref([])
	const bot = ref({})
	
	const queryList = (pageNo, pageSize) => {
		let params = {
			page: pageNo - 1,
			pageSize: pageSize
		}
		queryRobotFlow(params).then(res => {
			if(res.status == 0) {
				let obj = {
					...res.result
				}
				delete obj.content
				bot.value = obj
				paging.value.complete(res.result.robots.content);
			}else {
				paging.value.complete(false);
			}
		})
		
	}

	const goPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.data-box {
		width: calc(100vw - 80rpx);
		margin: 20rpx auto 0;
		background-image: url('/static/img/bot/l-bg.png');
		background-size: 100% 100%;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		color: #ffffff;

		.item-box {
			display: flex;
			justify-content: space-between;

			view {
				font-size: 24rpx;

				text {
					display: flex;
					font-size: 42rpx;
					font-weight: bold;
				}
			}

			view:last-child {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}

			.btn-box {
				width: 180rpx;
				height: 66rpx;
				background: #EB9E1D;
				border-radius: 33rpx;
				text-align: center;
				display: block !important;
				line-height: 66rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}

		.item-box:last-child {
			align-items: center;
		}
	}

	.item {
		width: calc(100vw - 80rpx);
		margin: 20rpx auto 0;
		background: #f5f5f5;
		border-radius: 16rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;

		.title-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			font-size: 30rpx;
			color: #1F1F1F;

			view {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.btn-box {
				font-size: 24rpx;
				font-weight: 400;
				color: #1F1F1F80;

				text {
					font-size: 30rpx;
					padding-left: 4rpx;
					border-radius: 30rpx;
					font-weight: 500;
					color: #1C5FFF;
				}
			}
		}

		.info-box {
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.need-pay {
				display: flex;
				justify-content: space-between;

				.label-box {
					color: #1F1F1F80;
				}

				.number-box {
					text-align: right;

					text {
						color: #1F1F1F80;
						padding-right: 10rpx;
					}
				}
			}
		}
	}
</style>